<%--
  Created by IntelliJ IDEA.
  User: hxh
  Date: 16/4/19
  Time: 上午10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div class="content" style="margin: 15px">

    <!-- 搜索页 ================================================== -->
    <div class="row">

        <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">标题：</label>

                    <div class="controls">
                        <input type="text" name="title" class="control-text">
                    </div>
                </div>
                <div class="control-group span12">
                    <label class="control-label"><s>*</s>类型：</label>

                    <div class="controls control-row2">
                        <select name="type">
                            <option value="-1">全部</option>
                            <option value="1">参展/赞助</option>
                            <option value="2">合作媒体</option>
                        </select>
                    </div>
                </div>
                <div class="form-actions span5">
                    <button id="btnSearch" type="submit" class="button button-primary">搜索</button>
                </div>

            </div>

        </form>

    </div>
    <div class="search-grid-container">
        <div id="grid">
        </div>

    </div>


    <div id="content" class="hide">
        <form id="J_Form" class="form-horizontal" action="./edit" method="post" enctype="multipart/form-data">

            <div class="row">
                <div class="control-group span12">
                    <label class="control-label"><s>*</s>标题</label>

                    <div class="controls">
                        <input type="text" name="title" class="control-text">
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label"><s>*</s>上传LOGO：</label>

                    <div class="controls control-row2">
                        <div id="J_Uploader"></div>
                        <input id="img" name="img" type="hidden" value=""/>
                    </div>
                </div>

            </div>


            <div class="row">
                <div class="control-group span12">
                    <label class="control-label"><s>*</s>是否可用</label>

                    <div class="controls">
                        <select name="status">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label"><s>*</s>类型：</label>

                    <div class="controls control-row2">
                        <select name="type">
                            <option value="1">参展/赞助</option>
                            <option value="2">合作媒体</option>
                        </select>
                    </div>
                </div>

            </div>


            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">跳转链接</label>

                    <div class="controls">
                        <input type="text" name="url" class="control-text">
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label"><s>*</s>跳转方式</label>

                    <div class="controls control-row2">
                        <select name="open">
                            <option value="_blank">在新窗口打开</option>
                            <option value="_parent">在本窗口打开</option>
                        </select>
                    </div>
                </div>

            </div>

        </form>
    </div>


    <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="/static/bui/js/bui.js"></script>
    <script type="text/javascript" src="/static/bui/js/uploader-min.js"></script>
    <script src="/static/bui/js/config.js"></script>
    <script type="text/javascript">

        BUI.use(['common/search', 'bui/uploader'], function (Search, Uploader) {
            var editing = new BUI.Grid.Plugins.DialogEditing({
                        contentId: 'content', //设置隐藏的Dialog内容
                        autoSave: true, //添加数据或者修改数据时，自动保存
                        triggerCls: 'btn-edit',
                        buttons: []
                    }),
                    enumObj = {"1": "是", "0": "否"},
                    enumObj2 = {"_parent": "本窗口打开", "_blank": "新窗口打开"},
                    enumObj3 = {"1": "参展/赞助", "2": "合作媒体"};
            var columns = [
                        {title: 'ID', width: 150, sortable: true, dataIndex: 'id'},
                        {title: '标题', width: 100, sortable: true, dataIndex: 'title'},
                        {
                            title: 'LOGO', width: 215, renderer: function (value, obj) {
                            return "<a href='http://img.oss.hd1905.com/" + obj.img + "' target='_Blank'><div style='width: 100px'><img style='width:100%;height=100%' src='http://img.oss.hd1905.com/" + obj.img + "'></img></div></a>"
                        }
                        },
                        {
                            title: '打开方式',
                            width: 150,
                            sortable: true,
                            dataIndex: 'open',
                            renderer: BUI.Grid.Format.enumRenderer(enumObj2)
                        },
                        {
                            title: '是否可用',
                            width: 100,
                            sortable: true,
                            dataIndex: 'status',
                            renderer: BUI.Grid.Format.enumRenderer(enumObj)
                        },
                        {title: '链接地址', width: 200, sortable: true, dataIndex: 'url'},
                        {
                            title: '类型',
                            width: 150,
                            sortable: true,
                            dataIndex: 'type',
                            renderer: BUI.Grid.Format.enumRenderer(enumObj3)
                        },
                        {
                            title: '创建日期',
                            sortable: true,
                            dataIndex: 'created',
                            width: 150,
                            renderer: BUI.Grid.Format.datetimeRenderer
                        },
                        {
                            title: '操作', width: 150, dataIndex: 'g', renderer: function () {
                            var editStr1 = '<span class="grid-command btn-edit" title="编辑信息">编辑</span>';
                            return editStr1
                        }
                        }
                    ]
                    ;

            var uploader = new BUI.Uploader.Uploader({
                render: '#J_Uploader',
                url: '/uploadImage.json',
                rules: {
                    //文的类型
                    ext: ['.jpg,.png,.jpeg', '文件类型只能为{0}']
                },
                //可以直接在这里直接设置成功的回调
                isSuccess: function (result) {
                    if (result.state == 'SUCCESS') {
                        BUI.Message.Alert("上传成功！")
                        $("#img").val(result.url)
                    } else {
                        BUI.Message.Alert("上传失败！")
                    }

                }

            }).render();


            var store = Search.createStore('/logo/list.json', {
                        proxy: {
                            save: { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                                addUrl: './edit',
                                updateUrl: './edit'
                            }
                            ,
                            method: 'POST'
                        },
                        autoSync: true,
                        pageSize: 10
                        //保存数据后，自动更新

                    }),
                    gridCfg = Search.createGridCfg(columns, {
                        tbar: {
                            items: [
                                {
                                    text: '<i class="icon-plus"></i>新建',
                                    btnCls: 'button button-small',
                                    handler: addFunction
                                },
                                {
                                    text: '<i class="icon-remove"></i>删除',
                                    btnCls: 'button button-small',
                                    handler: delFunction
                                }
                            ]
                        },
                        plugins: [editing, BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
                    });

            var search = new Search({
                        store: store,
                        gridCfg: gridCfg
                    }),
                    grid = search.get('grid');

            function addFunction() {
                var newData = {isNew: true, id: 0}; //标志是新增加的记录
                editing.add(newData, 'name'); //添加记录后，直接编辑
            }

            function delItems(items) {
                var ids = [];
                BUI.each(items, function (item) {
                    ids.push(item.id);
                });

                if (ids.length) {
                    BUI.Message.Confirm('确认要删除选中的记录么？', function () {
                        $.ajax({
                            url: './delete.json',
                            dataType: 'json',
                            data: {ids: ids.toString()},
                            type: "POST",
                            success: function (data) {
                                if (data.code == 2000) {
                                    search.load()
                                } else {
                                    BUI.Message.Alert("删除失败")
                                }
                            }
                        })
                    }, 'question');
                }
            }

            //删除操作
            function delFunction() {
                var selections = grid.getSelection();
                delItems(selections);
            }

        })

    </script>
</div>
</body>
</html>


